<template>
	<view class="container">
		<view class="input-box">
			<input type="number" placeholder="请输入" v-model="phoneNumber" />
			<image v-if="phoneNumber" @click="phoneNumber = ''" :src="$img_path('/pagesMine/63.png')" mode="widthFix"></image>
		</view>
		
		<view class="add-btn">
			<button @click="submit">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneNumber:''
			};
		},
		methods:{
			submit(){}
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
.container{
	padding: 0 22rpx;
	box-sizing: border-box;
	padding-bottom: calc(constant(safe-area-inset-bottom) + 140rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
	.input-box{
		width: 100%;
		height: 84rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #F6F6F6;
		border-radius: 42rpx;
		position: relative;
		input{
			width: calc(100% - 70rpx);
			padding-left: 26rpx;
		}
		&>image{
			width: 35rpx;
			height: 35rpx;
			margin-right: 24rpx;
		}
	}
	
	.add-btn{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 22rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
		box-sizing: border-box;
		button{
			width: 100%;
			height: 96rpx;
			background: linear-gradient( 135deg, #FFA233 0%, #FB4C4C 100%);
			border-radius: 80rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 96rpx;
		}
	}
}
</style>
